
export let demo={
    //要封装变量写变量
    data(){
        return {
          windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
          windowHeight: document.documentElement.clientHeight, //实时屏幕高度
          chl:''
        }
    },
    mounted() {
    // <!--把window.onresize事件挂在到mounted函数上-->
    var that = this
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        window.fullWidth = document.documentElement.clientWidth
        that.windowHeight = window.fullHeight // 高
        that.windowWidth = window.fullWidth // 宽
      })()
    }
     if(that.windowWidth<700){
      that.mainshow = false
    }else if(that.windowWidth<=1100){
      that.disabled = false
      that.mainshow = true
      that.CharactersShow = false
      that.$refs.Changesize.style.width = '60px'
      that.iconshow = false
    }else if(that.windowWidth>1100){
      that.disabled = true
      this.mainshow = true
      that.CharactersShow = true
      that.$refs.Changesize.style.width = '210px'
      that.iconshow = true
    }

    },
    watch: {
      //在watch中实时监测屏幕的宽度高度
      windowHeight(val) {
        let that = this
        // console.log('实时屏幕高度：', val, that.windowHeight)
      },
      windowWidth(val) {
        let that = this
        // console.log('实时屏幕宽度：', val, that.windowHeight)
        if(val<700){
          that.mainshow = false
        }
       else if (val <= 1100 && val >=1000) {
        that.disabled = false
        that.mainshow = true
          that.CharactersShow = false
          if(that.$refs.Changesize.style.width !== '60px'){
          let width =210
        let chl =  setInterval(()=>{
            width -=10
          that.$refs.Changesize.style.width = width +'px'  
          if(width == 60){
            clearInterval(chl)
          }
          },20)
          that.iconshow = false
          }
        }else if(val > 1100 && val<1200){
        that.disabled = true
          this.mainshow = true
          that.CharactersShow = true
          if(that.$refs.Changesize.style.width !== '210px'){
            let width1 = 60
            let ch2 =  setInterval(()=>{
              width1 +=10
            that.$refs.Changesize.style.width = width1 +'px'  
            if(width1 == 210){
              clearInterval(ch2)
            }
            },20)
          }
          that.$refs.Changesize.style.width = '210px'
          that.iconshow = true
        }
      }
    }
}